<template>
  <div id="app">
    <!-- 底部tabbar导航 -->
    <TabBar>
      <TabBarItem path='/Home'>
              <img src="@/assets/img/TabBar/home.png" alt slot="item-img" />
              <img src="@/assets/img/TabBar/homeActive.png" alt slot="item-img-active" />
              <div class="item-text" slot="item-text">首页</div>
      </TabBarItem>
      <TabBarItem path='/Source'>
              <img src="@/assets/img/TabBar/source.png" alt slot="item-img" />
              <img src="@/assets/img/TabBar/sourceActive.png" alt slot="item-img-active" />
              <div class="item-text" slot="item-text">素材圈</div>
      </TabBarItem>
      <TabBarItem path='/Team'>
              <img src="@/assets/img/TabBar/team.png" alt slot="item-img" />
              <img src="@/assets/img/TabBar/teamActive.png" alt slot="item-img-active" />
              <div class="item-text" slot="item-text">团队管理</div>
      </TabBarItem>
      <TabBarItem path='/Usercenter'>
              <img src="@/assets/img/TabBar/usercenter.png" alt slot="item-img" />
              <img src="@/assets/img/TabBar/usercenterActive.png" alt slot="item-img-active" />
              <div class="item-text" slot="item-text">个人中心</div>
      </TabBarItem>
    </TabBar>
    <router-view />
  </div>
</template>
<script>
import TabBar from "@/components/common/TabBar/TabBar.vue";
import TabBarItem from "@/components/common/TabBar/TabBarItem.vue";
export default {
  components: {
    TabBar,
    TabBarItem
  }
};
</script>
<style lang="less">
@import "~@/assets/css/base.css";
#app{
  position: absolute;
  z-index: 1;
  background: #fff;
  height: 100%;
  width: 100%;
}
</style>
